<template>
    <div>
        <h2 class="header_title">人员创建<span @click="dialogVisible = true" v-if="isEdit">批量创建</span></h2>
        <div class="_main" v-if="!isEdit"><no-right/></div>
        <div class="_main" v-if="isEdit">
            <div class="grxx">个人信息</div>
            <table class="listTable">
                <tr>
                    <td>学校: {{ form.schoolname }}</td>
                    <td>分类: {{ getName(form.type) }}</td>
                    <td>ID: {{ form.personid }}</td>
                    <td>院系: {{ form.collegename }}</td>
                    <td v-if="store.state.roleid == 1006">班级: {{ form.classname }}</td>
                    <td v-if="store.state.roleid == 1006">班主任: {{ form.headmaster }}</td>
                </tr>
            </table>
            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="部门:" v-if="store.state.roleid == 1005">
                    <div class="_el-ipt" :class="{ 'error': rules.departmentError }">
                        <el-input v-model="form.department" clearable class="inp" @blur="setError('rules', 'department', form)"></el-input>
                        <span class="_span" v-if="rules.departmentError">{{ rules.departmentMessage }}</span>
                    </div>
                </el-form-item>
                <el-form-item label="负责人:"  v-if="store.state.roleid == 1005">
                    <div class="_el-ipt" :class="{ 'error': rules.departmentheadError }">
                        <el-input v-model="form.departmenthead" clearable class="inp" @blur="setError('rules', 'departmenthead', form)"></el-input>
                        <span class="_span" v-if="rules.departmentheadError">{{ rules.departmentheadMessage }}</span>
                    </div>
                </el-form-item>
                <el-form-item label="姓名:">
                    <div class="_el-ipt" :class="{ 'error': rules.nameError }">
                        <el-input v-model="form.name" clearable class="inp" @blur="setError('rules', 'name', form)"></el-input>
                        <span class="_span" v-if="rules.nameError">{{ rules.nameMessage }}</span>
                    </div>
                </el-form-item>
                <el-form-item label="性别:">
                    <div class="_el-ipt" :class="{ 'error': rules.sexError }">
                        <el-select v-model="form.sex" placeholder="请选择" clearable @change="setError('rules', 'sex', form)">
                            <el-option label="男" value="1"></el-option>
                            <el-option label="女" value="2"></el-option>
                        </el-select>
                        <span class="_span" v-if="rules.sexError">{{ rules.sexMessage }}</span>
                    </div>
                </el-form-item>
                <el-form-item label="年龄:">
                    <div class="_el-ipt" :class="{ 'error': rules.ageError }">
                        <el-select v-model="form.age" placeholder="请选择" clearable @change="setError('rules', 'age', form)">
                            <el-option v-for="index in 100" :key="index" :value="index">{{ index }}</el-option>
                        </el-select>
                        <span class="_span" v-if="rules.ageError">{{ rules.ageMessage }}</span>
                    </div>
                </el-form-item>
                 <el-form-item label="身份证号:">
                    <div class="_el-ipt" :class="{ 'error': rules.idcardnoError }">
                        <el-input v-model="form.idcardno" clearable class="inp" @blur="setError('rules', 'idcardno', form)"></el-input>
                        <span class="_span" v-if="rules.idcardnoError">{{ rules.idcardnoMessage }}</span>
                    </div>
                </el-form-item>
                <el-form-item label="联系电话:">
                    <div class="_el-ipt" :class="{ 'error': rules.phoneError }">
                        <el-input v-number-input v-model="form.phone" clearable class="inp" @blur="setError('rules', 'phone', form)"></el-input>
                        <span class="_span" v-if="rules.phoneError">{{ rules.phoneMessage }}</span>
                    </div>
                </el-form-item>
                <el-form-item label="家长:">
                    <div class="_el-ipt" :class="{ 'error': rules.parentError }">
                        <el-input v-model="form.parent" clearable class="inp" @blur="setError('rules', 'parent', form)"></el-input>
                        <span class="_span" v-if="rules.parentError">{{ rules.parentMessage }}</span>
                    </div>
                </el-form-item>
                <el-form-item label="家长联系电话:">
                    <div class="_el-ipt" :class="{ 'error': rules.parentmobileError }">
                        <el-input v-number-input v-model="form.parentmobile" clearable class="inp" @blur="setError('rules', 'parentmobile', form)"></el-input>
                        <span class="_span" v-if="rules.parentmobileError">{{ rules.parentmobileMessage }}</span>
                    </div>
                </el-form-item>
                <el-form-item label="家庭住址:">
                    <div class="_el-ipt" :class="{ 'error': rules.addressError }">
                        <el-input v-model="form.address" clearable class="inp_address" @blur="setError('rules', 'address', form)"></el-input>
                        <span class="_span" v-if="rules.addressError">{{ rules.addressMessage }}</span>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="_confirmbtn position" size="small" @click="confirm">确认</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 弹出框 -->
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            width="400px">
                <el-button type="primary" @click="exports">Excel模板文件</el-button>
                <el-upload
                    ref="upload"
                    :file-list="fileList"
                    :limit="1"
                    :action="uploadUrl"
                    :data="{ userid: store.state.user.userid }"
                    :on-exceed="onExceed"
                    :on-change="onChange"
                    :on-success="onSuccess"
                    :on-error="onError"
                    accept=".xlsx,.xls"
                    class="upload-demo"
                    style="margin-left: 15px">
                    <el-button
                        slot="trigger"
                        size="mini"
                        type="primary">选择文件，批量上传</el-button>
                </el-upload>
        </el-dialog>
        <!-- ----- -->
    </div>
</template>

<script>
import store from '@/store'

export default {
    data() {
        return {
            store,
            form: {},
            message: '',
            isEdit: true,
            typeList: [
                {
                    id: 1,
                    name: '学生'
                },
                {
                    id: 2,
                    name: '职工'
                },
                {
                    id: 3,
                    name: '访客'
                }
            ],
            rules: {
                department: [
                    { required: true, message: '请输入部门', trigger: 'blur', type: 1 }
                ],
                departmenthead: [
                    { required: true, message: '请输入负责人', trigger: 'blur', type: 1 }
                ],
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur', type: 1 }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'blur', type: 1 }
                ],
                age: [
                    { required: true, message: '请选择年龄', trigger: 'blur', type: 1 }
                ],
                idcardno: [
                    { required: true, message: '请输入身份证号', trigger: 'blur', type: 1 },
                    { required: true, message: '请输入合法的身份证号', trigger: 'blur', type: 4 }
                ],
                phone: [
                    { required: true, message: '请输入联系电话', trigger: 'blur', type: 1 },
                    { required: true, message: '请输入合法的手机号码', trigger: 'blur', type: 2 }
                ],
                parent: [
                    { required: true, message: '请输入家长姓名', trigger: 'blur', type: 1 }
                ],
                parentmobile: [
                    { required: true, message: '请输入家长联系电话', trigger: 'blur', type: 1 },
                    { required: true, message: '请输入合法的手机号码', trigger: 'blur', type: 2 }
                ],
                address: [
                    { required: true, message: '请输入家庭住址', trigger: 'blur', type: 1 }
                ]
            },
            pArr: ['name', 'sex', 'age', 'idcardno', 'phone', 'parent', 'parentmobile', 'address'],
            dialogVisible: false,
            fileList: [],
            uploadUrl: 'http://wcxt.bjyulinkeji.com/personnel/batchimport'
        }
    },
    computed: {
    },
    mounted() {
        this.create()
    },
    methods: {
        create() {
            const params = Object.keys(this.$route.params).length > 0 ? this.$route.params : {}
            this.$http('personnel/form', Object.assign({ pagecurrent: 1, pagesize: 5 }, params)).then(({ code, message, data }) => {
                if (code == 200) {
                    this.form = data
                    this.isEdit = true
                } else {
                    this.isEdit = false
                    this.message = message
                }
            })
            
        },
        confirm() {
            var valid = true
            if (store.state.roleid == 1005) {
                this.pArr = [].concat(['department', 'departmenthead'], this.pArr)
            }
            this.pArr.map(name => {
                const rs = this.setError('rules', name, this.form)
                if (!rs) valid = rs
            })
            if (!valid) return
            this.$http('personnel/saveOrUpdate', this.form).then(({ code, message }) => {
                if (code == 200) {
                    this.$notify.success(message)
                    this.$router.push('/personnelAdministration')
                } else {
                    this.$notify.error(message)
                }
            })
        },
        getName(type) {
            const res = this.typeList.find(x => x.id == type)
            return res ? res.name : ''
        },
        // 错误验证
        setError(rulesName, name, ruleForm, name2) {
            var res = true
            const arr = this[rulesName][name]
            for(var i = 0 ; i < arr.length ; i++) {
                if (arr[i].type == 1) {
                    if (!ruleForm[name]) {
                        res = false
                        this.$set(this[rulesName], name + 'Error', true)
                        this.$set(this[rulesName], name + 'Message', arr[i].message)
                        break;
                    } else {
                        this.$set(this[rulesName], name + 'Error', false)
                    }
                } else if (arr[i].type == 2) {
                    if (!/^1[3456789]\d{9}$/.test(ruleForm[name])) {
                        res = false
                        this.$set(this[rulesName], name + 'Error', true)
                        this.$set(this[rulesName], name + 'Message', arr[i].message)
                        break;
                    } else {
                        this.$set(this[rulesName], name + 'Error', false)
                    }
                } else if (arr[i].type == 3) {
                    if (ruleForm[name] != ruleForm[name2]) {
                        res = false
                        this.$set(this[rulesName], name + 'Error', true)
                        this.$set(this[rulesName], name + 'Message', arr[i].message)
                    } else {
                        this.$set(this[rulesName], name + 'Error', false)
                    }
                } else if (arr[i].type == 4) {
                    let _IDRe18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
                    let _IDre15 =  /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
                    var idRes = true
                    // 校验身份证：
                    if( _IDRe18.test(ruleForm[name]) || _IDre15.test(ruleForm[name])) {
                        idRes = true
                    } else {
                        idRes = false
                    }
                    if (!idRes) {
                        res = false
                        this.$set(this[rulesName], name + 'Error', true)
                        this.$set(this[rulesName], name + 'Message', arr[i].message)
                        break;
                    } else {
                        this.$set(this[rulesName], name + 'Error', false)
                    }
                }
            }
            return res
        },
        exports() {
            location.href = 'http://wcxt.bjyulinkeji.com/personnel/template/export?userid=' + store.state.user.userid
        },
        onExceed() {
            this.$notify.warning('只能选择一个文件上传，若要更换文件，请先移除之前的文件')
        },
        // 文件变更
        onChange(file) {
            this.fileList = [].concat(file)
        },
        // 上传成功
        onSuccess({ code, message }) {
           if (code != 200) {
               this.$notify.error(message)
               return
           }
           this.$notify.success('导入文件成功')
           this.dialogVisible = false
           this.$router.push('/personnelAdministration')
        },
        // 上传失败
        onError({ code, message }) {
            if (code == 500) {
                this.$notify.error('服务器内部错误')
            } else {
                this.$notify.error('文件上传失败, 文件格式不正确')
            }
        },
    }
}
</script>

<style lang="less" scoped>
    /deep/ .el-form-item__label {
        text-align: left;
    }
    /deep/ .el-input__inner{
        background-color: transparent;
        font-size: 13px;
        color: #fff;
    }
    ._main {
        padding: 20px;
    }
    .inp,
    .inp_address {
        float: left;
        display: inline-block;
        width: 200px;
    }
    .inp_address {
        width: 400px;
    }
    /deep/ .el-form-item__label,
    .grxx {
        color: #fff;
    }
    .listTable {
        width: 100%;
        color: #fff;
        margin-top: 30px;
        margin-bottom: 15px;
        tr {
            display: flex;
            flex-direction: row;
            td {
                flex: 1
            }
        }
    }

    ._el-ipt {
      position: relative;
      float: left;
      ._span {
          position: absolute;
          left: 0;
          font-size: 12px;
          bottom: -32px;
          width: 300px !important;
      }
  }

  ._el-ipt.error {
      ._span {
          color: #F56C6C;
      }
      /deep/ .el-input__inner {
          border-color: #F56C6C;
      }
  }

  /deep/ .upload-demo,
  /deep/ .el-dialog__body {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  /deep/ .upload-demo {
    .el-button {
      height: 40px;
    }
    .el-upload-list__item-name,
    .el-upload-list__item-name .el-icon-document {
        color: #fff !important;
    }
  }

  /deep/ .el-dialog, 
  /deep/ .el-pager li {
    background-color: transparent;
  }

  /deep/ .el-dialog__header,
  /deep/ .el-dialog__body {
    border: 1px solid #0070ff;
    background-color: rgba(0, 112, 255, 0.2);
  }

  /deep/ .el-dialog__header {
    border-bottom: none;
    .el-dialog__title {
        display: inline-block;
        width: 100%;
        text-align: center;
        color: #fff;
    }
  }

  /deep/ .el-dialog__body {
    border-top: none;
  }

  /deep/ .el-upload-list__item-name,
  /dee/ .el-upload-list__item-name .el-icon-document {
      color: #fff;
  }

</style>